<template>
<div class="app">
    <div class="left">
        <h2 class="title">ssr-common</h2>
        <ul class="list">
            <li class="list-item">
                <router-link to="/">首页</router-link>
            </li>
            <li class="list-item">
                <router-link to="/about/us">关于我们</router-link>
            </li>
        </ul>
    </div>
    <router-view class="right"></router-view>
</div>
    <!-- <router-view class="app"></router-view> -->
</template>
<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
    name: 'app',
    data() {
        return {
        };
    },
    mounted() {
    },
    methods: {
    }
});
</script>
<style lang="less">
@import "./less/base.less";
</style>

<style lang="less" scoped>
.app {
    height: 100%;

    .left {
        // display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        border: 1px solid #ccc;

        .title {
            text-align: center;
        }

        .list {
            width: 200px;
            margin: 0;
            padding: 15px;
            .list-item {
                line-height: 38px;
                list-style: none;
            }
        }
    }
    .right {
        margin-left: 220px;
        background: #e1e1e1;
    }
}
</style>
